<template>
  <div class="cart-header">
    <span>总数量: {{ cartStore.number }}件</span>
    <div class="edit" @click="switchDelStatus">
      {{ delStatus ? "完成" : "编辑商品" }}
    </div>
  </div>
  <div class="items-container">
    <div class="item" v-for="item in cartStore.items">
      <van-checkbox
        v-model="item.selected"
        @change="changeCartSelect(item.key, item.selected)"
      />
      <van-card
        :num="item.number"
        :price="item.price"
        :title="item.name"
        :thumb="item.pic"
      >
        <template #footer>
          <van-stepper
            v-model="item.number"
            @change="changeCartNumber(item.key, item.number)"
          />
        </template>
      </van-card>
    </div>
  </div>
  <van-submit-bar
    :price="cartStore.price * 100"
    button-text="提交订单"
    @submit="onSubmit"
  >
    <van-checkbox v-model="allChecked">全选</van-checkbox>
    <template #button>
      <van-button v-if="!delStatus" type="danger" round style="width: 100px"
        >确定</van-button
      >
      <van-button @click="delItem" v-else type="danger" round style="width: 100px"
        >删除</van-button
      >
    </template>
  </van-submit-bar>
  <Tabbar />
</template>

<script setup lang="ts" name="Cart">
import Tabbar from "@/components/Tabbar.vue";
import { ref, onMounted, computed } from "vue";
import useCartStore from "@/stores/cart";
import { showConfirmDialog } from "vant";

const cartStore = useCartStore();

// 删除商品
const delItem = () => {
  showConfirmDialog({
    title: "删除商品",
    message: "此操作会彻底删除该商品,确定继续吗?",
  }).then(() => {
    // 得到所有选中商品， 拿到keys
    const selectedItems = cartStore.items.filter((item) => item.selected);
    const selectedItemKeys: string[] = [];
    selectedItems.forEach((item) => {
      selectedItemKeys.push(item.key);
    });
    cartStore.delCartItem({
      key: selectedItemKeys.join(","),
    });
    delStatus.value = false;
  });
};

// 修改购物车商品选中状态
const changeCartSelect = (key: string, selected: boolean) => {
  cartStore.changeCartSelected({
    key,
    selected,
  });
};
// 修改商品购买数量
const changeCartNumber = (key: string, number: number) => {
  cartStore.changeCartNumber({
    key,
    number,
  });
};

// 删除商品状态
const delStatus = ref(false);
const switchDelStatus = () => {
  delStatus.value = !delStatus.value;
};
// 计算全选状态
const allChecked = computed<boolean>({
  get: () => {
    if (cartStore.items.length === 0) {
      return false;
    } else {
      return cartStore.items.every((item) => item.selected);
    }
  },
  set(val) {
    // 修改所有商品选中状态
    console.log(val);
    // 得到所有商品key
    const itemKeys: string[] = [];
    cartStore.items.forEach((item) => {
      itemKeys.push(item.key);
    });
    changeCartSelect(itemKeys.join(","), val);
  },
});

// 提交订单
const onSubmit = () => {};
onMounted(() => {
  cartStore.fetchCartInfo();
});
</script>

<style scoped lang="scss">
.cart-header {
  width: 100%;
  padding: 0 10px;
  height: 40px;
  background-color: #fafafa;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0;
  top: 0;
}
.items-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 100px;
  overflow-y: auto;
  padding: 0 10px;
  .item {
    display: flex;
    align-items: center;
    .van-card {
      flex: 1;
    }
  }
}
.van-submit-bar {
  bottom: 50px;
}
</style>
